<template>
  <div class="pane">
    <ul class="biaotou">
      <li class="left">{{ $t('时间') }}</li>
      <li class="mid">{{ $t('价格') }}</li>
      <li class="right">{{ $t('数量') }}</li>
    </ul>
    <div class="list-container padding">
      <ul v-for="item in realTimeDeals[symbol]" :key="item.id" class="xinxi">
        <li class="left">{{ item.time | timeFormat('{h}:{i}:{s}') }}</li>
        <li class="mid">
          <p v-if="item.type === 'buy'" class="price buy">{{ item.price | priceFormat(coinPair.decimals) }}</p>
          <p v-else class="price sell">{{ item.price | priceFormat(coinPair.decimals) }}</p>
        </li>
        <li class="right">{{ item.amount | numberFormat(6) }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState({
      symbol: ({ exchange }) => exchange.symbol,
      realTimeDeals: ({ exchange }) => exchange.realTimeDeals
    }),
    ...mapGetters({
      coinPair: 'market/coinPair'
    })
  },
  beforeMount () {
    this.subscribeDeals(this.symbol)
  },
  methods: {
    ...mapActions({
      subscribeDeals: 'exchange/subscribeDeals'
    })
  }
}
</script>
<style scoped>
.price {
  float: left !important;
  width: 100% !important;
}
.buy {
  text-align: center;
  color: #049e82;
}
.sell {
  text-align: center;
  color: #d14b64;
}
.padding {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
.list-container {
  box-sizing: border-box;
  height: 600px;
  width: 100%;
  overflow-y: auto;
}
.biaotou li {
  color: #929db1!important;
}
.k-bottom .pane .biaotou {
  border-bottom: none;
}
.k-bottom .pane .xinxi {
  border-bottom: none;
}
.xinxi .left {
  color: white;
}
.xinxi .right {
  color: white;
}
</style>
